<template>
  <div class="dashboard-container">
    <!-- {{now_time.getHours()}} -->
    <div v-if="now_time.getHours()>6 && now_time.getHours()<11" class="dashboard-text one">早上好: {{userInfo.realname}}</div>
    <div v-else-if="now_time.getHours()>=11 && now_time.getHours()<14" class="dashboard-text two">中午好: {{userInfo.realname}}</div>
    <div v-else-if="now_time.getHours()>=14 && now_time.getHours()<18" class="dashboard-text three">下午好: {{userInfo.realname}}</div>
    <div v-else class="dashboard-text four">夜深了，早点休息: {{userInfo.realname}}</div>

    <!-- 判断当前的时间 -->
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import axios from '@/http/axios'

export default {
  data(){
    return{
      userInfo:{},
      now_time:''
    }
  },
  created(){
    var token = localStorage.getItem('token')
    this.findUserInfo(token);
    this.now_time = new Date();
  },
  methods:{
    findUserInfo(token){
      var obj = {
        token
      }
      axios({
        url:'http://121.199.29.84:8001/user/info',
        method:'GET',
        params:obj
      }).then((res)=>{
        this.userInfo = res.data.data;
        // 把用户头像存放到浏览器
        localStorage.setItem('userFace',res.data.data.userFace);
      })
    }
  }
  
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 10px;
}
.dashboard-text {
  // position: relative;
  color: white;
  height: 100%;
  font-family: '华文楷体';
}
.one {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-image:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600573256388&di=35d0bf5062935084ed30dfbdbb7b732c&imgtype=0&src=http%3A%2F%2Fimg.tuwandata.com%2Fv2%2Fthumb%2Fall%2FZTE1OCwwLDAsNCwzLDEsLTEsMSw%3D%2Fu%2Fwww.tuwan.com%2Fuploads%2Fallimg%2F1406%2F25%2F710-140625095157.jpg");
}
.two {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2896443411,855753614&fm=26&gp=0.jpg');
}
.three {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600594305949&di=2b6ca548d02dd4a895e03c2ca2094c75&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F03%2F165620x7cknad7vruvec1z.jpg');
}
.four {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600608433028&di=48ede7ee918c2314a30ff46e9b85e2c6&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1234516734%2C3114301563%26fm%3D214%26gp%3D0.jpg');
}

</style>

